RWD 是一種「設計原則」，可分成不同的流動模式:
RWD有5種不同的流動模式:
- 主體為流動 (mostly fluid)
- 欄內容下排 (column drop)
- 版面配置位移 (layout shifter)
- 微小調整 (tiny tweaks)
- 畫布外空間利用 (off canvas)
注意:
- Responsive 模式- Google 建議在網站或應用程式開發期間使用為預設模式。
- 特定裝置模式 - 開發末期，想要進一步改善網站在特定裝置的呈現時，才需要使用。
原生 CSS 提供了適合應用於 RWD 的佈局系統，如：
flexbox
grid
製作 RWD 的基本動作，這些動作依序為：
- 定義預設的 viewport 尺寸
- 使用 CSS 媒體查詢 (media queries)
- 設定分界點 (breakpoint)
要瞭解 media queries，需要先從 CSS 的 media 屬性開始。
media 屬性
- media types: 所有裝置 (all)、螢幕 (screen)、印表機 (print)
手機，螢幕尺寸有很大不同，CSS3 直接使用「條件」來查詢，稱為 media queries。 - Media queries 是在原有的 media type 外，加上「media feature」的篩選條件。
在開發網頁時，通常會直接把 media type 被設為 screen。@media (max-width: 600px) {...//styles} //設定沒有公布 media type，所以會預設成 all @media screen and (max-width: 600px) {...//styles} @media screen and (min-width: 600px) and (max-width: 1000px) {...//styles}
使用條件查詢的作法比較有彈性，因為可以設定不同的 breakpoint，根據不同的狀況來載入 CSS 設定，因此能達成「回應不同的寬度」。
在 Google Developers 的【回應式網頁設計模式】一文中，歸納了幾種不同的設計模式。
UX Research Articles - Readability: the Optimal Line Length
Google Developers - 使用 Device Mode 模擬移動設備
Scott Kellum - A Pixel Identity Crisis
單位
換算絕對單位：target ÷ context = result
依父元素的比例來計算:
父元素: 500px
子元素: 200px
200 / 500 = 40%
viewport 百分比長度 (viewport percentage lengths)
這些單位會隨著 viewport 尺寸一同縮放：
- vw - 對應到 width of viewport 的比例
- vh - 對應到 height of viewport 的比例
- vmin - 等於 vw 或 vh 較小的值
- vmax - 等於 vw 或 vh 較大的值
若 viewport 的寬是 1200px，1vw 會等於viewport寬度的1% = 12px
若 viewport 的高是 900px，
因為寬比高的值大，vw > vh
所以 1vmax 相當於 1vw (12px)
1 vmin 相當於 1vh (9px)
em 字體相對單位
em 用於文字大小，以父元素的 font-size 為基準。
e.g.: 父元素的字體大小為 16px，子元素設定 1em (=16px)
限制彈性
min-width、max-width、min-height 和 max-height 等屬性來控制邊界值。
img {
width: 100%;
max-width: 960px; //設定在 img上 維持圖片的清晰度。
}
max-width 內容最外層容器
.container (or .wrapper) {
width: 90%;
max-width: 960px; //當 viewport 太大時，寬度還是可以維持。
}
min-width 表單裡使用
width: 50%; 和 flex: 0 0 50%; RWD上的差別
codepen
在指定一個元素在 RWD（響應式網頁設計）中的寬度和彈性。在RWD中，"width: 50%;" 會設定元素的寬度為其父元素寬度的50%。而 "flex: 0 0 50%;" 則是使用 Flexbox 佈局的方式，這個屬性告訴彈性容器（flex container）的子元素（flex items）在空間分配上的規則。這個設定表示該元素不會增長、不會縮小，並且佔用的空間為父容器的50%。
"width: 50%;" 是一般的 CSS 設定，它會直接設定元素的寬度。而 "flex: 0 0 50%;" 則是 Flexbox 的設定，它基於彈性佈局的原則來分配元素的空間。在某些情況下，特別是使用了 Flexbox 佈局的情境下，"flex: 0 0 50%;" 可能會更加彈性並能夠更好地適應不同尺寸的螢幕或設備。
